<template >
    <div>
        <h3>ref</h3>
        <p>{{count}}</p>
        <button @click="handleClick">点击</button>
    </div>
    <div>
        <h3>reactive</h3>
        <p>{{countReactive.count}}</p>
        <button @click="handleClickReactive">点击</button>
    </div>
    <div>
        <h3>computed</h3>
        <p>{{countComputed}}</p>
    </div>
    
</template>
<script setup lang="ts">
import { ref,reactive,computed } from 'vue'

const count = ref(0)
function handleClick() {
    count.value++
}
let countReactive = reactive({
    count:0
})
// 返回的是一个 计算属性 ref 和其他 ref 类型
const countComputed = computed({
    // 计算属性的 getter 应只做计算而没有任何其他的副作用 不要改变其他状态 在 getter 做异步请求或者更改 DOM  避免直接修改计算属性的值
    get(){
        return  count.value>5?'大于5':'小于5'
    },
    set(newValue){
        count.value = newValue + 10
    },
})
 
const handleClickReactive = () => {
    // 1. 使用 reactive 定义的数据是响应式数据 通过属性访问实现的响应式 因为不能直接修改和替换整个对象 这样会丢失响应式
    // 2.使用解构赋值 失去响应式
    // countReactive = reactive({
    //     count:100
    // })
    countReactive.count++
}
</script>
